<template>
  <a-form
    :model="formState"
    @finish="handleFinish"
    @finishFailed="handleFinishFailed"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    style="margin-top: 20px"
  >
    <a-form-item>
      <a-input v-model:value="formState.user" placeholder="请输入账号">
        <template #prefix
          ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
        /></template>
      </a-input>
    </a-form-item>

    <a-form-item>
      <a-input
        v-model:value="formState.password"
        type="password"
        placeholder="请输入密码"
      >
        <template #prefix
          ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
        /></template>
      </a-input>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
      <a-button
        type="primary"
        html-type="submit"
        :disabled="formState.user === '' || formState.password === ''"
      >
        登录
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import VueEvent from "../../utils/event";
import { useStore } from "vuex";
import { dologin1 } from "../../api/user";
import io from "../../utils/socket";

export default defineComponent({
  setup() {
    const store = useStore();
    const formState = reactive({
      user: "",
      password: "",
    });

    const handleFinish = () => {
      dologin1({
        url: "/login/dologin1",
        username: formState.user,
        password: formState.password,
        success: (res) => {
          // console.log(res);
          if (res.data.data == "success") {
            store.dispatch("setUser", true);
            sessionStorage.setItem("Flag", "loginType");
            sessionStorage.setItem("imgUrl", res.data.img_head);
            VueEvent.emit("login");
            io.emit("login", { uid: res.data.uid });
            message.info("登录成功");
          } else {
            message.info(res.data);
          }
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const handleFinishFailed = (errors) => {
      console.log(errors);
    };

    return {
      formState,
      handleFinish,
      handleFinishFailed,
      labelCol: {
        span: 12,
      },
      wrapperCol: {
        span: 16,
        offset: 4,
      },
    };
  },

  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>
